<template>
    <div class="grantPermissionDialog">
        <el-dialog :close-on-click-modal="isModelClose" :before-close="close" title="角色授权" :style="dialogStyle" v-if="isShowGrantPermissionDialog" :visible.sync="isShowGrantPermissionDialog">
            <el-tree style="max-height:350px;overflow: auto" :data="treeData" show-checkbox default-expand-all :default-checked-keys="selectData" node-key="id" ref="tree" highlight-current :props="defaultProps">
            </el-tree>
            <div class="buttons">
                <el-button type="primary" @click="confirm">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Emit, Prop } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import * as _ from 'lodash'
    import AdminApiActions from '@/components/api/admin-api-actions';
    import TreeUtils from "@/components/common/tree-utils";

    @Component({
        components: {}
    })
    export default class GrantPermissionDialog extends Vue {
        @Prop() params: any;
        public isShowGrantPermissionDialog: boolean = true;
        public dialogStyle: any = {};
        public isModelClose: boolean = false;
        public treeData: any = new Array < any > ();
        public selectData: any = new Array < any > ();
        public defaultProps: any = {
            children: 'children',
            label: 'name'
        }
        public async created() {
            let menuData: any = await AdminApiActions.getSysPermissionPage({ name: "", type: this.params.roleType });
            let allData: any = await AdminApiActions.getSysPermissionPage({ name: "" });
            let result: Array < any >= new Array < any > ();
            TreeUtils.getChildTree(result, allData.data, menuData.data);
            this.treeData = TreeUtils.buildTree(result);
            await this.initDefaultCheck();
        }
        /**
         * 默认选中
         */
        public async initDefaultCheck() {
            let result: any = await AdminApiActions.getRolePermission({ roleId: this.params.roleId, type: 1 });
            let data: any = result.data.map(item => item.id);
            this.selectData = data;
        }
        @Emit("close")
        public close() {
            this.isShowGrantPermissionDialog = false;
        }
        @Emit("confirm")
        public async confirm() {
            let halfTreeData: any = (this.$refs.tree as any).getCheckedNodes();
            let helfSelectData: any = (this.$refs.tree as any).getHalfCheckedNodes();
            let selectTreeData = [...halfTreeData, ...helfSelectData];
            let rolePermissionRls: any = selectTreeData.map(item => {
                return {
                    permissionId: item.id,
                    roleId: this.params.roleId
                }
            });
            await AdminApiActions.deleteRolePermission({ roleId: this.params.roleId });
            await AdminApiActions.addRolePermission(rolePermissionRls);
        }
        public cancel() {
            this.close();
        }
    }
</script>
<style lang="less">
    .grantPermissionDialog {
        width: 100%;
        background-color: white;
        height: 100%;

        .el-dialog {
            width: 30% !important;
        }

        .buttons {
            display: flex;
            margin-top: 20px;
            margin-bottom: 20px;
            justify-content: center;
        }
    }
</style>